<template>
  <div class="payroll-box">
    <nav-title title="工资单" :routerLink="routerLink"/>
    <div class="payroll-img">
      <img src="./images/u3645.png" alt="">
      <p>身份验证</p>
    </div>
    <div class="payroll-inputBox">
      <input type="text" v-model="nationalId" readonly  placeholder="身份证号">
      <div>
        <input type="password" v-model="password" placeholder="薪资二次密码">
        <span>请输入密码</span>
      </div>
      <!-- <div @click="toEditPwd" class="edit_pwd">修改薪资安全码</div> -->
    </div>
    <button @click="submit">查看</button>
    <div class="payroll-remarks">
      <p style="font-weight: bold;color:#000000;">
        注：工资单查询初始密码为身份证后六位<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如需重置请联系所在单位薪资专员。
      </p>
    </div>
  </div>
</template>

<script>
  import { getNationalId, loginPayroll } from './../../api/api';
  import CommonUtil from '../../components/basic/util'
  import qs from 'qs';
  export default {
    name: 'Payroll',
    components: {
    },
    created() {
    },
    mounted() {
      CommonUtil.tryLogin(this).then(()=>{
        getNationalId()
          .then((res)=>{
            if (res && res.retCode === '000000') {
              this.nationalId = res.retData
            } else {
              this.$vux.alert.show({
                title: "提示",
                content: res.retMsg
              });
            }
          })
          .catch(res => {
          this.$vux.alert.show({
            title: '警告',
            content: '网络异常，请稍后重试'
          })
        })
      });
      
    },
    data() {
      return {
        routerLink: '',
        nationalId: '',
        verificationCode: '',
      }
    },
    methods: {

      submit() {
        if ( !this.password ) {
          return this.$vux.alert.show({
            title: '提示',
            content: '密码不能为空！'
          })
        }
        loginPayroll(qs.stringify({password: this.password}))
          .then((res)=>{
            if (res && res.retCode === '000000') {
              this.$router.push({
              name: 'payrollDetail'
              })
            } else {
              this.$vux.alert.show({
                title: "提示",
                content: res.retMsg
              });
            }
          })
          .catch(res => {
            this.$vux.alert.show({
              title: '警告',
              content: '网络异常，请稍后重试'
            })
          })
      },
      toEditPwd() {
        that.$router.push({
          path: '/editPwd'
        })
      }


    }
  }
</script>

<style type="text/scss" lang="scss">
  // @import '../../styles/staff.scss';
  .payroll-box{
    .payroll-img{
      padding: 20px 0;
      img {
        width: 150px;
      }
      p{
        font-size: 18px;
      }
    }
    .payroll-inputBox{
      padding: 20px 0;
      >div, >input{
        border: 1px solid rgba(242, 242, 242, 1);
        border-radius: 20px;
        line-height: 37px;
        width: 80%;
        font-size: 18px;
        padding-left: 20px;
      }
      >div{
        margin: 0 auto;
        margin-top: 20px;
        position: relative;
        height: 39px;
        >input{
          float: left;
          line-height: 37px;
          font-size: 18px;
        }
        >span{
          position: absolute;
          right: 10px;
          top: 0;
        }
        .readOnly-verificationCode{
          color: #ccc;
        }
      }
      .edit_pwd {
        border: none;
        width: 100%;
        text-align: right;
        font-size: 16px;
        color: #1caafe;
        padding-right: 40px;
        margin-top: 10px;
      }
    }
    >button{
      background-color: rgba(28, 170, 254, 1);
      width: 80%;
      height: 37px;
      font-size: 16px;
      color: #fff;
      border: none;
      outline: none;
      border-radius: 20px;
      margin: 30px 0;
    }
    .payroll-remarks{
      color: #ccc;
      text-align: left;
      font-size: 16px;
      width: 80%;
      margin: 0 auto;
    }
  }
</style>
